<template>
	<div id="addCar">
		<div class="breadcrumb">
			<el-breadcrumb separator-class="el-icon-arrow-right">
			<div v-if="target == 0">
				<el-breadcrumb-item :to="{ name: 'managerCar' }">车辆管理</el-breadcrumb-item>
				<el-breadcrumb-item>添加车辆</el-breadcrumb-item>
			</div>
			 <div v-if="target != 0">
			  	<el-breadcrumb-item :to="{ name: 'managerUser' }">用户管理</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ name: 'userInfo',query:{user_id:userid} }" >用户信息查看</el-breadcrumb-item>
			  	<el-breadcrumb-item>添加车辆</el-breadcrumb-item>
			 </div>
			</el-breadcrumb>
		</div>
		<div class="addCar">
			<p class='title'>添加车辆</p>
			<div v-if="select == 0 ">
				<div class="adddiv">
					<label for="target">对象</label>
					<span v-cloak>{{target | target}}</span>
				</div>
				<div class="adddiv">
					<label for="license_num">车牌号</label>
					<input type="text" name="license_num" v-model="car.license_num" @blur="queryNum" />
					<span v-cloak>{{this.has}}</span>
				</div>
				<div class="adddiv">
					<label for="type">车辆类型</label>
					<input type="text" name="type" v-model="car.type" />
				</div>
				<div class="adddiv">
					<label for="brand">车辆品牌</label>
					<input type="text" name="brand" v-model="car.brand" />
				</div>
				<div class="inputfile">
					<div id="filePic">
						<el-button type="info">选择图片</el-button>
						<input class="fileClass" type="file" name='pic' @change="uploadPic($event)" accept="image/png,image/jpg,image/jpeg" />
					</div>
					<div class="showPic">
						<img :src="pic" width="70" height="70">
					</div>
				</div>
				<div class="addCarBtn">
					<div v-if="target !=0">
						<el-button @click='selectCar(1)' type="primary">选择系统车辆</el-button>
					</div>
					<div >
						<el-button @click="postCar" type="primary">添加</el-button>
					</div>
				</div>
			</div>
			<div v-else class="selectCar">
				<div class="select">
					<template>
					  车辆：<el-select v-model="value" placeholder="请选择">
						<el-option
						  v-for="item in data"
						  :key="item.id"
						  :value="item.value">
						  <span style="float: left">{{ item.value }}</span>
						  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.label }}</span>
						</el-option>
					  </el-select>
					</template>
				</div>
				<div class="addCarBtn">
					<div>
						<el-button @click='selectCar(0)' type="primary">返回</el-button>
					</div>
					<div >
						<el-button @click = 'postUserCar' type="primary">添加</el-button>
					</div>
				</div>
			</div>
			
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			 
			return {
				car: {
					license_num: ''
				},
				file: '',
				pic: '',
				has:'',
				target:0,
				userid:0,
				select:0,
				noUserCarInfo:'',
				value:'',
				data:[],
			}
		},
		filters:{
			target:function(val){
				if(val == 0){
					return '无'
				}else{
					return val
				}
			}
		},
		watch:{
			$route:function(val){
				if(val.query.user == undefined){
					this.target = 0;
				}else{
					this.target = val.query.user
				}
			}
		},
		created() {
			if(this.$route.query.user == undefined){
				this.target = 0;
			}else{
				this.target = this.$route.query.user;
				this.userid = this.$route.query.id
			}
		},
		methods: {
			toUserInfo(){
				this.$router.push({
					name: 'userInfo',
					query: {
						user_id: this.userid
					}
				})
			},
			selectCar(state){
				if(state == 1){
					this.getNoUserCarInfo();
				}else{
					this.select = 0;
				}
				
			},
			postCar() {
				if(this.car.license_num && this.car.type && this.car.brand && this.file){
					let data = new FormData();
					data.append('license_num', this.car.license_num)
					data.append('type', this.car.type)
					data.append('brand', this.car.brand)
					data.append('file', this.file)
					this.$axios.post('/api/car/addCar', data, {
							headers: {
								'Content-Type': 'multipart/form-data'
							}
						})
						.then(data => {
							if (data.data == 'ok') {
								if(this.target == 0){
									this.$router.push({
										name: 'managerCar',
									})
								}
								if(this.target !=0){
									this.postUserCarInfo();
								}
							}
						})
						.catch(err => {
							console.log(err)
						})
				}
				else{
					alert('填写完信息')
				}
				
			},
			postUserCarInfo(car = this.car.license_num ,username = this.target){
				this.$axios.post('/api/info/updateUserCarInfo',{user:{car:car,username:username}})
				.then(data => {
					if (data.data == 'ok') {
						if(this.target == 0){
							this.$router.push({
								name: 'managerCar',
							})
						}
						else{
							this.$router.push({
								name: 'userInfo',
								query:{user_id:this.userid}
							})
						}
						console.log('成功添加车辆')
					}		
				})
				.catch(err => {
					console.log(err)
				})
			},
			uploadPic(event) {
				let a = /image/;

				let file = event.target.files[0];

				if (a.test(file.type)) {
					this.file = file;


					let reader = new FileReader();
					reader.onload = e => {
						this.pic = e.target.result;
					}
					reader.readAsDataURL(file)
				}

			},
			queryNum() {
				if (this.car.license_num == '') {
					return;
				}
				this.$axios.post('/api/car/queryCarNum', {
						num: this.car.license_num
					})
					.then(data => {
						if (data.data == 'has') {
							this.has = '车牌号已存在'
						}
						if (data.data == 'nohas') {
							this.has = '√'
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			getNoUserCarInfo(){
				this.$axios.get('/api/admin/getNoUserCarInfo')
				.then(data=>{
					if(data.status == 200){
						this.noUserCarInfo = data.data;
						
						for(let i = 0 ; i<data.data.length ;i++ ){
							this.data[i]={
								key:data.data[i].id,
								label: `${data.data[i].type}` ,
								value: `${data.data[i].license_num}`
							}
						this.select = 1;
						}
						 
					}
				})
				.catch(err=>{
					console.log(err)
				})
			},
			postUserCar(){
				if(this.value == ''){
					alert('请选择车辆');
					return;
				}
				let car = this.value;
				let username = this.target;
				this.$axios.post('/api/info/updateUserCarInfo',{user:{car:car,username:username}})
				.then(data => {
					if (data.data == 'ok') {
						
							this.$router.push({
								name: 'userInfo',
								query:{user_id:this.userid}
							})
						console.log('成功添加车辆')
					}		
				})
				.catch(err => {
					console.log(err)
				})
			}
			
		}
	}
</script>

<style lang='less' scoped>
	[v-cloak]{
            display: none
        }
	#addCar {
		width: 100%;
		height: 100%;
		.breadcrumb{
			height: 28px;
			span{
				line-height: 28px;
		
			}
		}
		.addCar{
			width: 500px;
			height: 460px;
			margin: 0 auto;
			position: relative;
			top: 60px;
			border:1px solid #E0ECFF;
			background-color: white;
			color: black;
			border-radius:10px; 
		}
		.title{
			font-size: 20px;
			margin-top:5px; 
			}
		.adddiv {
			margin-top: 30px;
			display: flex;
			display: -webkit-flex;
			margin-left:50px;
			
			label {
				
				width: 160px;
				line-height: 30px;
				
			}
			
			input {
				
				width: 200px;
				
				border: 1px solid #000;
				height: 30px;
			}
			
			
			span{
				line-height: 30px;
			}

		}
		.addCarBtn{
			display: -webkit-flex;
			display: flex;
			
			justify-content: center;
			align-items: center;
			button{
				margin: 10px 10px;
			}
		}

		.inputfile {
			display: flex;
			display: -webkit-flex;
			margin: 10px;
			#filePic {
				position: relative;
				margin-top: 20px;
				margin-left: 50px;
				height: 50px;
				width: 270px;
				overflow: hidden;

				.fileClass {
					position: absolute;
					top: 0;
					left: 50px;
					opacity: 0;
					width: 100px;
					height: 40px;
				}

				button {
					position: absolute;
					top: 0;
					left: 50px;

					width: 100px;
					height: 40px;
				}

				.showPic {
					img{
						margin-top:10px; 
					}
					
				}
			}
		}
		.selectCar{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			.select{
				margin-top:20px; 
				flex: 0 0 315px;
			}
			.addCarBtn{
				display: -webkit-flex;
				display: flex;
				
				justify-content: center;
				align-items: center;
				button{
					margin: 10px 20px;
				}
			}
		}

	}
</style>
